<template>
    <div>
        <header>购物车</header>
        <van-card v-for="item in list" :key="item.index">
            
<template #thumb>
    <div class="aa">
        <input type="checkbox" class="check" v-model="arr" :value="item.goods_name" @change="mai(item)">
        <img :src="item.goods_img" alt="">
    </div>
</template>
<template #title>
    <div>
        {{item.goods_name}}
    </div>
</template>
<template #price>
    <div>
        {{item.goods_price}}
    </div>
</template>
  <template #footer>
    <van-button size="mini" @click="incr(item)">-</van-button>
    {{item.goods_count}}
    <van-button size="mini" @click="add(item)">+</van-button>
  </template>
</van-card>
<van-notice-bar color="red" background="#ecf9ff" left-icon="info-o">
  您的订单为虚拟订单(支付后不发货)，切勿大额付款
</van-notice-bar>
<van-submit-bar v-model="price" button-text="提交订单" @submit="to()">
   
  <van-checkbox v-model="ischeck1" @click="allcheck()" class="all">全选</van-checkbox>
  <div v-model="price"> 合计：{{price}}</div>
</van-submit-bar>
    </div>
</template>

<script>
import Vue from 'vue';
import axios from "../api/http"
import uri from "../config/uri"
import { Card ,Tag,Button,NoticeBar,SubmitBar,Checkbox} from 'vant';

Vue.use(Card);
Vue.use(Tag)
Vue.use(Button)
Vue.use(NoticeBar);
Vue.use(SubmitBar);
Vue.use(Checkbox)
export default {
    data(){
        return{
            list:[],
            price:0,
            arr:[],
            ischeck1:false,
        }
    },
    created() {
        axios.get(uri.cart).then((ret)=>{
            if(ret.message=="ok"){
                this.list = ret.cartInfo;
                console.log(this.list)
            }
        })
        
    },
    methods: {
        
        allcheck(){
            if(this.ischeck1){
                this.list.forEach((item)=>{
                this.arr.push(item.goods_name);
                this.price += item.goods_price * item.goods_count
            })
            
            }else{
                this.arr=[];
                this.price = 0
            }
        },
        incr(item){
          if(item.goods_count>1){
              item.goods_count--;
             this.price -= item.goods_price
           
          }else{
              alert("再减没了")
          }
        },
        add(item){
           item.goods_count++;
            
                this.price += item.goods_price
           
        },
        mai(item){
            this.price += item.goods_price * item.goods_count;
            
                
        },
        to(){
            if(this.price>0){
                
                let num = "20210410"+Math.floor(Math.random()*1000000);
                
                
                window.open("https://m.28sjw.com/alipay_wap/alipayapi.php?WIDsubject=Vue综合练习（赵丽敏）&WIDout_trade_no="+num+"&WIDtotal_fee="+this.price,"_blank");
                
            }
            
        }
    },
}
</script>

<style>
.all{position:relative;left:-100px}
.aa{display:flex;}
.check{margin-top:30px;}
</style>